<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.dictShow"
    @close="tableConfig.dictShow = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-form ref="formPassword" :rules="rulesDict" :model="formDict" label-width="180px">
      <el-form-item label="所属字典组" >
        <el-input v-model="dictGroupName" disabled></el-input>
      </el-form-item>
      <el-form-item label="字典名称" prop="name" >
        <el-input v-model.trim="formDict.name"></el-input>
      </el-form-item>
      <el-form-item label="字典代码" prop="code" >
        <el-input v-model.trim="formDict.code"></el-input>
      </el-form-item>
      <el-form-item label="字典值" prop="value" >
        <el-input v-model.trim="formDict.value" ></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort" >
        <el-slider
          :marks="marks" :min="0" :max="100" :step="0.1"
          v-model="formDict.sort" show-input>
        </el-slider>
      </el-form-item>
      <el-form-item label="备注" prop="describe" >
        <el-input v-model="formDict.remarks" type="textarea"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd" v-if="defaultValue.saveUpdSelect !== 'select'">{{defaultValue.title}}</el-button>
      <el-button plain type="primary" @click="tableConfig.dictShow = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>
  import http from '@/utils/http';
  import {clearInvalid} from "../../utils/utils";

  export default {
    name: "DictSaveUpd",
    data(){
      return {
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          dictShow: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '查看',
          // 保存还是修改or查看,取值有 select | save | upd
          saveUpdSelect: 'select'
        },
        // 所属字典组
        dictGroupName: null,
        // 要提交的数据
        formDict: {
          id: null,
          groupId: null,
          code: null,
          name: null,
          value: null,
          baseData: 1,
          remarks: null,
          sort: 99,
        },
        // 排序的默认值
        marks: {
          10: '靠前',
          70: '靠后',
        },
        // 校验
        rulesDict: {
          code: [{ required: true, message: '请输入字典代码，组内有且唯一', trigger: 'blur' }],
          name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
          value: [{ required: true, message: '请输入字典数据值', trigger: 'blur' }],
          // baseData: [{ required: true, message: '请选择是否基础数据', trigger: 'change' }],
        },
      }
    },
    methods: {
      /**
       * 是保存还是修改字典组
       */
      toSaveUpd(){
        if (this.defaultValue.saveUpdSelect === 'save'){
          this.saveDict()

        } else if (this.defaultValue.saveUpdSelect === 'upd'){
          this.updDict()

        } else {

        }
      },
      /**
       * 更新字典
       */
      updDict(){
        clearInvalid(this.formDict)
        http.post("/dict/updDict", this.formDict).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("修改成功");
          this.$emit('getDictListPage', null)
          // 关闭弹出框
          this.initDict()
          this.tableConfig.dictShow = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 保存字典
       */
      saveDict(){
        http.post("/dict/saveDict", this.formDict).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("保存成功");
          this.$emit('getDictListPage', null)
          // 关闭弹出框
          this.initDict()
          this.tableConfig.dictShow = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开弹出框之前
       * @param value 保存还是修改or查看,取值有 select \ save \ upd
       * @param obj 如果是修改和查看，则是详细数据,需要赋值
       * @param dictGroup 选中的字典组
       */
      openDictPage(value, obj, dictGroup){
        this.defaultValue.saveUpdSelect = value
        this.dictGroupName = dictGroup.name
        if (value === 'save'){
          this.defaultValue.title = '保存字典'
          this.initDict()
          this.formDict.groupId = dictGroup.id

        } else if (value === 'upd'){
          this.defaultValue.title = '修改字典'
          this.formDict = obj

        } else {
          this.defaultValue.title = '字典详情'
          this.formDict = obj
        }

        this.tableConfig.dictShow = true
        this.$store.commit('navigationListChange', ['字典配置', this.defaultValue.title])
      },
      /**
       * 初始化字典
       */
      initDict(){
        this.formDict = {
          baseData: 1,
          sort: 99,
        }
      }
    },
    mounted(){
    },
  }
</script>

<style scoped>

</style>
